<template>
    <el-card class="box-card">
        <!-- 顶部：线上热门搜索 -->
        <div slot="header" class="clearfix">
            <div class="header_top">
                <span>线上热门搜索</span>
                <el-dropdown>
                    <span class="el-dropdown-link"><i class="el-icon-more"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>黄金糕</el-dropdown-item>
                        <el-dropdown-item>狮子头</el-dropdown-item>
                        <el-dropdown-item>螺蛳粉</el-dropdown-item>
                        <el-dropdown-item>双皮奶</el-dropdown-item>
                        <el-dropdown-item>蚵仔煎</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div>
            <el-row :gutter="10">
                <el-col :span="12">
                    <LineChart/>
                </el-col>

                <el-col :span="12">
                    <LineChart/>
                </el-col>
            </el-row>

            <!-- 下方的表格 -->
            <el-table :data="tableData" style="width: 100%;margin-top: 10px" :default-sort = "{prop: 'date', order: 'descending'}" border>
                <el-table-column type="index" align="center" label="排名"  width="80">
                </el-table-column>

                <el-table-column prop="name" label="搜索关键字">
                </el-table-column>

                <el-table-column prop="address" label="用户数" sortable >
                </el-table-column>

                <el-table-column prop="address" label="周涨幅" sortable>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
                style="text-align: center"
                layout="prev, pager, next"
                :total="1000">
            </el-pagination>
        </div>
    </el-card>
</template>

<script>
import LineChart from './lineChart/LineChart'

export default {
    name: "Search",
    data(){
      return {
          tableData:[{}]
      }
    },
    components: {
        LineChart
    }
}
</script>

<style scoped>
.clearfix {
    padding: 5px 0;
}
.header_top {
    display: flex;
    justify-content: space-between;
}
.el-dropdown-link {
    cursor: pointer;
}
</style>
